<template>
  <div class="feedback-form">
    <el-card class="form-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <h3>意见反馈</h3>
          <p class="sub-title">您的反馈是我们进步的动力</p>
        </div>
      </template>
      
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-position="top"
      >
        <!-- 基本信息 -->
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="formData.name"
            placeholder="请输入您的姓名"
          />
        </el-form-item>
        
        <el-form-item label="联系电话" prop="phone">
          <el-input
            v-model="formData.phone"
            placeholder="请输入您的联系电话"
          />
        </el-form-item>
        
        <el-form-item label="公司名称" prop="company">
          <el-input
            v-model="formData.company"
            placeholder="请输入您的公司名称"
          />
        </el-form-item>
        
        <el-form-item label="部门" prop="department">
          <el-input
            v-model="formData.department"
            placeholder="请输入您的部门名称（选填）"
          />
        </el-form-item>

        <!-- 反馈类型 -->
        <el-form-item label="反馈类型" prop="type">
          <el-radio-group v-model="formData.type">
            <el-radio-button label="产品咨询">产品咨询</el-radio-button>
            <el-radio-button label="技术支持">技术支持</el-radio-button>
            <el-radio-button label="商务合作">商务合作</el-radio-button>
            <el-radio-button label="投诉建议">投诉建议</el-radio-button>
            <el-radio-button label="其他">其他</el-radio-button>
          </el-radio-group>
        </el-form-item>
        
        <!-- 反馈标题 -->
        <el-form-item label="反馈标题" prop="title">
          <el-input
            v-model="formData.title"
            placeholder="请简要描述您的反馈"
          />
        </el-form-item>
        
        <!-- 反馈内容 -->
        <el-form-item label="反馈内容" prop="content">
          <el-input
            v-model="formData.content"
            type="textarea"
            :rows="6"
            placeholder="请详细描述您的反馈内容，以帮助我们更好地理解和改进"
          />
        </el-form-item>
        
        <!-- 图片上传 -->
        <el-form-item label="上传截图（选填）" prop="images">
          <el-upload
            v-model:file-list="fileList"
            action="/api/feedback/upload"
            list-type="picture-card"
            :limit="3"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :before-upload="beforeUpload"
          >
            <el-icon><Plus /></el-icon>
            <template #tip>
              <div class="upload-tip">
                支持 jpg、png 格式，单个文件不超过 2MB
              </div>
            </template>
          </el-upload>
        </el-form-item>
        
        <!-- 提交按钮 -->
        <el-form-item>
          <el-button
            type="primary"
            :loading="submitting"
            @click="submitForm"
          >
            提交反馈
          </el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { submitFeedback } from '@/api/feedback'

const formRef = ref(null)
const submitting = ref(false)
const fileList = ref([])

const formData = reactive({
  type: '产品咨询',
  title: '',
  content: '',
  name: '',
  phone: '',
  company: '',
  department: '',
  images: []
})

const rules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  company: [
    { required: true, message: '请输入公司名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择反馈类型', trigger: 'change' }
  ],
  title: [
    { required: true, message: '请输入反馈标题', trigger: 'blur' },
    { min: 5, max: 50, message: '长度在 5 到 50 个字符', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入反馈内容', trigger: 'blur' },
    { min: 10, max: 1000, message: '长度在 10 到 1000 个字符', trigger: 'blur' }
  ],
  department: [
    { max: 50, message: '长度不超过 50 个字符', trigger: 'blur' }
  ]
}

// 上传相关方法
const beforeUpload = (file) => {
  const isImage = ['image/jpeg', 'image/png'].includes(file.type)
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isImage) {
    ElMessage.error('只能上传 JPG/PNG 格式的图片！')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB！')
    return false
  }
  return true
}

const handleUploadSuccess = (response, file) => {
  if (response.code === 200) {
    // 保存图片相关信息
    formData.images = [{
      url: response.data.url,
      name: file.name,
      size: file.size,
      type: file.type
    }]
    ElMessage.success('图片上传成功')
  } else {
    ElMessage.error(response.message || '图片上传失败')
  }
}

const handleUploadError = () => {
  ElMessage.error('图片上传失败，请重试')
}

// 表单提交
const submitForm = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    submitting.value = true
    
    const submitData = {
      ...formData,
      image: formData.images.length > 0 ? JSON.stringify(formData.images[0]) : null
    }
    
    // 删除多余的字段
    delete submitData.images
    
    const response = await submitFeedback(submitData)
    
    if (response.code === 200) {
      ElMessage.success('感谢您的反馈，我们会认真考虑您的建议')
      resetForm()
    } else {
      ElMessage.error(response.message || '提交失败，请稍后重试')
    }
  } catch (error) {
    if (error.fields) {
      ElMessage.error('请检查表单填写是否正确')
    } else {
      ElMessage.error(error.message || '提交失败，请稍后重试')
    }
  } finally {
    submitting.value = false
  }
}

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
    fileList.value = []
    formData.images = []
  }
}
</script>

<style lang="scss" scoped>
.feedback-form {
  max-width: 800px;
  margin: 0 auto;

  .form-card {
    .card-header {
      text-align: center;
      
      h3 {
        margin: 0;
        font-size: 24px;
        color: #303133;
      }

      .sub-title {
        margin: 10px 0 0;
        font-size: 14px;
        color: #909399;
      }
    }

    :deep(.el-form) {
      margin-top: 20px;

      .el-form-item__label {
        padding-bottom: 8px;
        font-weight: 500;
      }

      .el-radio-group {
        width: 100%;
        display: flex;
        justify-content: space-between;
        
        .el-radio-button {
          flex: 1;
          margin: 0 10px;
          
          &:first-child {
            margin-left: 0;
          }
          
          &:last-child {
            margin-right: 0;
          }
          
          :deep(.el-radio-button__inner) {
            width: 100%;
          }
        }
      }

      .upload-tip {
        font-size: 12px;
        color: #909399;
        margin-top: 5px;
      }

      .el-form-item:last-child {
        margin-bottom: 0;
        text-align: center;
        
        .el-button {
          padding: 12px 30px;
          
          & + .el-button {
            margin-left: 20px;
          }
        }
      }
    }
  }
}
</style> 